/* eslint-disable @typescript-eslint/no-unused-vars */
// Home.tsx
import React, { useState, useRef ,useEffect } from "react";
import "../../css/Home/Home.css";
import avatarImage from "../../assets/images/qq.png";
import noticeIcon from "../../assets/images/notice.png";
import copyIcon from "../../assets/images/copy-icon.png";
import VIPIcon from "../../assets/images/VIP.png";
import VIPIs from "../../assets/images/VIPs.png";
import orderImage from "../../assets/images/order.png";
import messageImage from "../../assets/images/message.png";
import myImage from "../../assets/images/my.png";
import enterpriseImage from "../../assets/images/企业服务.png";

import { useNavigate } from "react-router-dom";
function Home() {
  const navigate = useNavigate();
  const [showPopup, setShowPopup] = useState(false);
  const [showAiPopup, setShowAiPopup] = useState(false);
  const [toastVisible, setToastVisible] = useState(false);
  const userIdRef = useRef<HTMLSpanElement>(null);
  // 状态管理返回顶部按钮
  const [showBackTop, setShowBackTop] = useState(false);
  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      setShowBackTop(window.scrollY > 200);
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  // 返回顶部函数的操作11112
  const scrollToTop = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  };

  const handleLogout = () => {
    // 这里可以添加退出登录逻辑，例如：
    // 1. 清除本地存储的token
    localStorage.removeItem("authToken");
    // 2. 清除用户信息
    localStorage.removeItem("userInfo");
    // 3. 跳转到登录页
    navigate("/login");
  };
  // 复制处理函数
  const handleCopyUserId = () => {
    if (!userIdRef.current) return;

    // 提取数字
    const text = userIdRef.current.textContent || "";
    const numbers = text.match(/\d+/)?.[0] || "";

    // 复制到剪贴板
    navigator.clipboard
      .writeText(numbers)
      .then(() => {
        showToast("复制成功");
      })
      .catch(() => {
        showToast("复制失败");
      });
  };

  // 显示提示框
  const showToast = (_message: string) => {
    setToastVisible(true);
    setTimeout(() => setToastVisible(false), 1000);
  };

  return (
    <div className="Home-box">
      {/* 头部 */}
      {/* 顶部提示框 */}
      {toastVisible && <div className="copy-toast">复制成功</div>}
      <div className="Home-header">
        {/* 头部右侧 */}
        <div className="Home-header-right">
          {/* 新增的开通会员框 */}
          <div className="vip-service">
            <img src={VIPIcon} alt="" />
            <span className="vip-text">开通会员</span>
          </div>

          {/* 企业服务栏 */}
          <div className="enterprise-service">
            <img src={enterpriseImage} alt="" />
            <span className="service-text">企业服务</span>
          </div>
          <img src={noticeIcon} alt="" className="notice-icon" />

          <div className="avatar-wrapper">
            <img
              src={avatarImage}
              alt="User Avatar"
              className="avatar-image"
              onMouseEnter={() => setShowPopup(true)}
            />
            {/* 头部右侧弹框 */}
            {showPopup && (
              <div
                className="popup-box"
                onMouseEnter={() => setShowPopup(true)}
                onMouseLeave={() => setShowPopup(false)}
              >
                <div className="popup-content">
                  <div className="Bulletframe">
                    {/* toptop */}
                    <div className="Bulletframe-top">
                      <img
                        src={avatarImage}
                        alt="User Avatar"
                        className="avatar-image"
                      />
                      {/* 右侧信息区域 */}
                      <div className="popup-user-info">
                        <div className="user-name-row">
                          <span className="user-name">corss</span>
                          <span className="creator-tag">创建者</span>
                        </div>

                        <div className="user-id-row">
                          <span className="user-id" ref={userIdRef}>
                            用户ID：105088185
                          </span>
                          <img
                            src={copyIcon}
                            alt="Copy"
                            className="copy-icon"
                            onClick={handleCopyUserId}
                          />
                        </div>
                      </div>
                    </div>
                    {/* 免费版 */}
                    <div className="Bulletframe-topbuttom">
                      <div className="Bulletframe-topmian">
                        <img src={VIPIcon} alt="" className="Bulletframe-VIp" />
                        <div className="Bulletframe-free">免费版</div>
                      </div>

                      <div className="Bulletframe-kai">
                        <div className="Bulletframe-kaitop">
                          开通会员至尊专属特权
                          <button>立即开通</button>
                        </div>
                        <div className="Bulletframe-kaibom">
                          50万+模板.商用特权.无水印下载
                        </div>
                      </div>
                    </div>
                    {/* 扩容 */}
                    <div className="Bulletframe-three">
                      <div className="Bulletframe-Storage">
                        <div className="storage-content">
                          <span className="storage-label">存储空间</span>
                          <div className="storage-expand">
                            <span>扩容</span>
                            <span className="expand-icon">❯</span>
                          </div>
                        </div>
                        {/* 添加进度条 */}
                        <div className="storage-progress">
                          <div className="storage-progress-bar"></div>
                        </div>
                        {/* 添加用量显示 */}
                        <div className="storage-usage">
                          <span>0k</span>
                          <span className="storage-double">/</span>
                          <span className="storage-total">3G</span>
                        </div>
                      </div>
                      {/* AI */}
                      <div className="Bulletframe-AI">
                        <div className="ai-content">
                          <div
                            className="ai-title-row"
                            onMouseEnter={() => setShowAiPopup(true)}
                            onMouseLeave={() => setShowAiPopup(false)}
                          >
                            <span>AI贴贴</span>
                            {/* 直接跟在文字后的问号 */}
                            <div className="question-icon">?</div>
                            {showAiPopup && (
                              <div className="ai-popup-box">
                                <div className="ai-popup-content">
                                  <p>
                                    <strong>Q：什么是贴？</strong>
                                    <br />
                                    A：
                                    贴是创客贴AI能量的一种创作物质，你可以通过消耗贴来实验AI绘图工具，创客贴编辑器内相关AI功能
                                    <p>等。</p>
                                  </p>

                                  <p>
                                    <strong>Q：如何获得贴？</strong>
                                    <br />
                                    A：· 平台快递体验（仅快递用户个人可用）
                                    <br />
                                    · 购买创客贴会员，不同等级会员可获得不同贴贴
                                    <br />
                                    · 单独购买贴贴
                                    <br />
                                    · 加入创作交流群，参与不定期活动获得
                                    <br />·
                                    团队成员，在团队中均消耗当前团队贴贴数
                                  </p>

                                  <p>
                                    <strong>Q：贴过去时间吗？</strong>
                                    <br />
                                    A：· 平台快递--数据平台活动活力调整
                                    <br />
                                    · 会员贴贴，根据会员到期时间到期
                                    <br />· 单独购买一根据购买说明时长
                                  </p>
                                </div>
                              </div>
                            )}

                            {/* 右侧操作容器 */}
                            <div className="ai-actions">
                              <span>加购</span>
                              <span className="expand-icon">❯</span>
                            </div>
                          </div>
                          <h2>10</h2>
                          <div className="ai-month">
                            <div className="ai-month-content">
                              <span>会员每月免费领贴贴</span>
                              <span className="expand-icon">❯</span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>

                    {/* 个人版 */}
                    <div className="personal-Edition">
                      {/* 左侧头像与文字 */}
                      <div className="personal-left">
                        <img
                          src={avatarImage}
                          alt="User Avatar"
                          className="avatar-image"
                        />
                        <div className="personal-text">
                          <div className="user-name">corss</div>
                          <div className="edition-type">个人版</div>
                        </div>
                      </div>

                      {/* 右侧创建团队按钮 */}
                      <div className="create-team">
                        <div className="create-team-badge">免费体验</div>
                        <span className="plus-icon">+</span>
                        创建团队
                      </div>
                    </div>
                    {/* 订单 */}
                    <div className="cursor-box">
                      <div className="cursor-slider">
                        <img src={orderImage} alt="" className="cursor-order" />
                        <span className="order-text">订单/发票</span>
                      </div>

                      <div className="cursor-slider">
                        <img
                          src={messageImage}
                          alt=""
                          className="cursor-order"
                        />
                        <span className="order-text">消息中心</span>
                      </div>

                      <div className="cursor-slider">
                        <img src={myImage} alt="" className="cursor-order" />
                        <span className="order-text">我的优惠券</span>
                      </div>
                    </div>
                    {/* 退出登录 */}
                    <div className="log-out" onClick={handleLogout}>
                      <div className="log-out-content">退出登录</div>
                    </div>
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
        {/* 右下角 */}
        {/* 帮助按钮和弹框容器 */}
        <div 
  className={`back-top-button ${showBackTop ? 'visible' : ''}`} 
  onClick={scrollToTop}
>
  <span className="arrow-up">↑</span>
</div>
        
        <div className="help-button-container">
          {/* 问号按钮 */}
          <div className="help-button">?</div>
   
          {/* 弹框内容 - 现在在左侧 */}
          <div className="help-popup-box">
            <div
              className="help-popup-item"
              onClick={() => navigate("/tutorial")}
            >
              <img src={orderImage} alt="" className="help-popup-icon" />
              <span className="help-popup-text">新手教程</span>
            </div>
            <div
              className="help-popup-item"
              onClick={() => navigate("/help-center")}
            >
              <img src={orderImage} alt="" className="help-popup-icon" />
              <span className="help-popup-text">帮助中心</span>
            </div>
            <div
              className="help-popup-item"
              onClick={() => navigate("/feedback")}
            >
              <img src={orderImage} alt="" className="help-popup-icon" />
              <span className="help-popup-text">意见反馈</span>
            </div>
            <div
              className="help-popup-item"
              onClick={() => window.open("https://support.example.com")}
            >
              <img
                src={orderImage}
                alt=""
                className="help-popup-icon"
              />
              <span className="help-popup-text">在线客服</span>
            </div>
            <div
              className="help-popup-item"
              onClick={() => navigate("/template-request")}
            >
              <img
                src={orderImage}
                alt=""
                className="help-popup-icon"
              />
              <span className="help-popup-text">提交模板需求</span>
            </div>
          </div>
        </div>
      </div>
      <div className="home-content">{/* context */}</div>
    </div>
  );
}

export default Home;
